<template>
<div>
    <van-search v-model="keyword" placeholder="请输入搜索关键词" @search="onSearch(keyword)" />

    <div v-if="keyword.length == 0">
        <div class="hot">定位/正在访问</div>
        <van-row gutter="20">
            <van-col span="6">
                <van-button 
                type="default" 
                size="normal" 
                @click="handleClick">{{location}}</van-button>
            </van-col>

            <van-col span="6" v-for="item of visitedCities" :key="item.id">
                <van-button 
                type="default" 
                size="normal" 
                @click="handleClick">{{item}}</van-button>
            </van-col>
        </van-row>
        
        <div class="hot">热门城市</div>
        <van-row gutter="20">
            <van-col span="6" v-for="item of result.hotCities" :key="item.id">
                <van-button 
                type="default" 
                size="normal" 
                @click="handleClick">{{item.name}}</van-button>
            </van-col>
        </van-row>

        <div>所有城市</div>
        <van-index-bar :index-list="lists">
            <div v-for="(cities,index) of result.cities" :key="index">
                <van-index-anchor :index="index" />
                <div v-for="city of cities" :key="city.id">
                    <van-button type="default" 
                size="normal" @click="handleClick">{{city.name}}</van-button>
                </div>
            </div>
        </van-index-bar>
    </div>

    <div v-if="keyword.length > 0">
        <van-button v-for="item of searchCities" :key="item.id" @click="handleClick">{{item.name}}</van-button>
        <div v-if="searchCities.length == 0">
            无结果
        </div>
    </div>


</div>
</template>

<script>


import axios from 'axios';
    export default {
        data(){
            return{
                keyword:"",
                lists:"",
                result:"",
                searchCities:"",
                visitedCities:'',
                location:""
            }
        },
        mounted() {
            // this.location = location;

            let url = "http://47.108.197.28:8000/city";
            axios.get(url).then(res=>{
                // console.log(res.data.data.cities)
                this.result = res.data.data;
                this.lists = Object.keys(this.result.cities)
            })
            var location = localStorage.getItem('locationCity')
            console.log(location)
            this.location = location
            if(location){
                this.visitedCities = location
            }else{
                localStorage.setItem('location',[])
            }
        },
        methods:{
            onSearch(keyword){
                // console.log(keyword);
                var city = this.result.cities;
                var searchCities = [];
                for(let key in city){
                    city[key].forEach(item=>{
                        if(item.name.includes(keyword) || item.spell.includes(keyword)){
                            searchCities.push(item)
                        }
                    })
                }
                this.searchCities=searchCities;
            },
            handleClick(){
                // var res = localStorage.getItem('location');
                // console.log(val);
                // if(!res.includes(val)){
                //     res.unshift(val)
                // }
                // localStorage.setItem('res',res.slice(0,3))
                this.$router.push('/films/nowPlaying')
            },
        }
    }
</script>
<style scoped>
</style>